<script setup>
import { GetListAPI } from '@/api/device/equipment'
import { GetDeviceDdlAPI } from '@/api/device/maintenance/project.js'

// 子传父
const emit = defineEmits()

// 父传子
const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
  //   传入数据 用于回显
  data: {
    type: Object,
    default: () => {},
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  //   传入数据 弹窗标题
  title: {
    type: String,
    default: '',
  },
})

const ruleFormRef = ref(null)

// 表单字段
const ruleForm = reactive({})

// 设备台账列表
const deviceSel = ref([])
const tabs = ref('维修信息')

// 表单校验
const rules = reactive({
  deviceCode: [{ required: true, message: '请选择设备编号', trigger: 'blur' }],
})

// 提交方法
const submit = async () => {
  const valid = await ruleFormRef.value.validate()
  if (!valid) return false
  return ruleForm
}

// 选择下拉带出相应数据
const deviceCodeChange = (val) => {
  const result = deviceSel.value.find((item) => item.deviceCode == val)
  if (result) {
    ruleForm.deviceName = result.deviceName
    ruleForm.deviceType = result.deviceType
    ruleForm.deviceUnitType = result.deviceUnitType
    ruleForm.installationLocationName = result.installationLocationName
    ruleForm.deviceId = result.id
  }
}

// 获取设备列表信息
const getDeviceSel = async () => {
  const { data: res } = await GetDeviceDdlAPI()
  deviceSel.value = res
}

// 监听回显
const initData = () => {
  if (props.data?.repairId)
    Object.keys(props.data).forEach(
      (itemKey) => (ruleForm[itemKey] = props.data[itemKey])
    )
}

getDeviceSel()
initData()
// 导出方法
defineExpose({ submit })
</script>
<template>
  <el-form
    inline
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    status-icon
  >
    <el-form-item label="维修单号" v-if="props.title != '新增'">
      <el-input
        clearable
        v-model="ruleForm.repairCode"
        disabled
        placeholder="请填写维修单号"
      />
    </el-form-item>

    <el-form-item label="设名称" prop="deviceCode">
      <el-select
        :disabled="props.title != '修改' && props.title != '新增'"
        v-model="ruleForm.deviceCode"
        filterable
        placeholder="请选择设备编号"
        @change="deviceCodeChange"
      >
        <el-option
          v-for="item in deviceSel"
          :key="item.deviceCode"
          :label="item.deviceName"
          :value="item.deviceCode"
        >
          <span style="float: left">{{ item.deviceName }}</span>
          <span
            style="
              float: right;
              margin-left: 5px;
              color: var(--el-text-color-secondary);
              font-size: 13px;
            "
            >{{ item.deviceCode }}</span
          >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="设备类型">
      <el-input
        clearable
        disabled
        v-model="ruleForm.deviceType"
        placeholder=""
      />
    </el-form-item>
    <el-form-item label="设备型号">
      <el-input
        clearable
        disabled
        v-model="ruleForm.deviceUnitType"
        placeholder=""
      />
    </el-form-item>
    <el-form-item label="设备编码">
      <el-input
        clearable
        v-model="ruleForm.deviceCode"
        disabled
        placeholder=""
      />
    </el-form-item>
    <el-form-item label="位置">
      <el-input
        clearable
        v-model="ruleForm.installationLocationName"
        disabled
        placeholder=""
      />
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
</style>
